<template>
  <div class="clazz-container">
    <el-card class="box-card">
      <el-form 
            ref="formRef" 
            :rules="rules"
            :model="form">
           <el-row>
              <el-col :span="24">
                <el-form-item label="班级名称" prop="name">
                    <el-input v-model="form.name" style="width:100%"/>
                </el-form-item>
              </el-col>
           </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item>
                  <div class="btns">
                    <template v-if="form.id === null">
                      <el-button class="btn" type="success" @click="submitForm">保存</el-button>
                    </template>
                    <template v-else>
                      <el-button class="btn" type="success" @click="updateForm">更新</el-button>
                    </template>
                    <el-button class="btn" type="danger" @click="resetForm">重置</el-button>
                  </div>
                </el-form-item>
              </el-col>
           </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //要提交的数据
      form:{
        id: null,
        name: null
      },
      rules:{
        name: [{required: true, message: '班级名称不能为空', trigger: 'blur'}]
      }
    }
  },
  created(){
    if(this.clazzId != null && this.clazzId != ''){
      this.getClazzById(this.clazzId);
    }
  },
  computed:{
    clazzId(){
      return this.$store.state.clazzId;
    }
  },
  methods:{
    //根据id获取班级信息
    getClazzById(id){
      this.getRequest("/api/teacher/classes/select/"+id).then(resp =>{
        if( resp && resp.code == 200){
          this.form = resp.obj;
        }
      })
    },
    //班级创编
    submitForm(){
      this.$refs.formRef.validate( valid => {
        if( !valid){
          this.$message.error("请输入所有的必填项！！");
          return false;
        }else{
          this.postRequest("/api/teacher/classes/edit",this.form).then(resp=>{
            if( resp && resp.code == 200){
              this.$router.replace("/teacher/clazz/list");
            }
          })
        }
      })
    },
    //班级更新
    updateForm(){
      this.$refs.formRef.validate( valid => {
        if( !valid){
          this.$message.error("请输入所有的必填项！！");
          return false;
        }else{
          this.putRequest("/api/teacher/classes/edit",this.form).then(resp=>{
            if( resp && resp.code == 200){
              this.$store.commit("initClazzId","");
              this.$router.replace("/teacher/clazz/list");
            }
          })
        }
      })
    },
    //重置表单
    resetForm(){
      this.$refs.formRef.resetFields();
      this.form = {
        id: null,
        name: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clazz-container{
  font-family: "华文楷体";
  .box-card{
     border-radius: 10px;
     color:#1A1A1A;
     .btns{
      display: flex;
      justify-content: flex-end;
      margin: 20px 0 10px 0 ;
      .btn{
        padding-left:  35px;
        padding-right:  35px;
        font-size: 14px;
        font-family: "华文楷体";
      }
    }
  }
  /deep/.el-form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px !important;
  }
  /deep/.el-form-item__label{
    text-align: left;
  }
  /deep/.el-form-item__label-wrap {
    margin-left:  0 !important;
  }
}
</style>